Like
the express edition of Visual Studio, the Windows Phone 7 tools include
an express version of Microsoft Expression Blend specifically for use
for developing phone applications. You could launch Blend by looking
for the shortcut key, but instead you can open it directly with Visual
Studio. If you right click on the MainPage.xaml, you will get a context
menu like the one shown in Figure 1.
By selecting the “Open
in Expression Blend...” option, Blend will open the same solution in
the Expression Blend tool with the selected XAML file in the editor as
shown in Figure 2.
While the Expression Blend
tool is thought of as a purely design tool, designers and developers
alike can learn to become comfortable with the tool. Like Visual
Studio, the tool is made up of a number of panes that you will need to
get familiar with.
Blend and Visual Studio both open entire Solutions, not just files. This is a significant difference from typical design tools.
The first pane (labeled #1)
contains multiple tabs that give you access to several types of
functionality. By default the first tab (and the tab in the foreground)
is the “Projects” tab. This tab shows the entire solution of projects.
The format of this tab should look familiar; it’s showing the same
information as the “Solution Explorer” in Visual Studio. The next pane
(labeled #2) is the editor pane. This pane contains tabs for each of
the opened files (only one at this point). The MainPage.xaml should be
the currently shown in the editor. Note that the editor shows the page
in the context of the phone so you can better visualize the experience
on the phone. On the right side of Blend is another set of tabs
(labeled #3) that contain information about selected items in the
design surface. The selected tab should be the “Properties” tab. This
tab is similar to the Property Pane from Visual Studio but is decidedly
more designer-friendly. As you select items on the design surface,
you’ll be able to edit them in the Property tab here. Finally, the
Objects and Timeline (labeled #4) is a pane that shows the structure of
your XAML as a hierarchy.
Let’s make some changes with Blend. First, (as shown in ) select the ‘hello world’ text in the designer.
Once it’s selected, you can
see that eight squares surround the selection. These are the handles
with which you can change the size or location of the TextBlock. While
this object selected, you can see that in the “Objects and Timeline”
pane shows the item selected in the hierarchy; as well, the item is
shown in the Property tab so you can edit individual properties (as
shown in Figure 4).
If you type “text” into the
search bar of the Property pane, you will see that the properties that
have that substring in them appear (to simplify the Properties). You
can change the title by changing the Text property as shown in Figure 5.
Once you’re done changing the
text, you may want to click the “X” in the search bar to clear the
search criteria. This will remove the search and show all the
properties of the TextBlock again.
Selecting items
and changing properties seems a lot like what you could do in Visual
Studio but that’s just where the design can start. Let’s draw
something. Start by selecting a container for the new drawing. In the
Objects and Timeline window, pick the item called “ContentGrid”. This
will show you that it is a container that takes up most of the space
below our “Hello World” text on the phone’s surface.
We can draw a rectangle
in that container by using the left-hand toolbar. On the toolbar you’ll
see a rectangle tool (as shown in Figure 15). Once you are using the Rectangle tool, draw a rectangle in the ContentGrid to create a new rectangle (also shown in Figure 6). If you then select the top arrow tool (or hit the “V” key) you’ll be ready to modify the rectangle.
The rectangle that you
created has eight control points (the small squares at the corners and
in the middle of each side). In addition, the rectangle has two small
control points in the upper left side (outside the surface area of the
rectangle). These controls are used to round the corners of rectangles.
If you grab the top one with your mouse you’ll be able to change the
corners to be rounded slightly as shown in Figure 7.
Now that you have rounded
the corners, you can use the Property pane to change the colors of the
rectangle. To do this, start with the Property pane. You will see a
Brushes section that contains the way that the different brushes for
the rectangle are painted. The Rectangle contains two brushes: Fill and
Stroke. Selecting one of these brushes will allow you to use the lower
part of the brush editor to change the look of that brush. Below the
selection of brush names is a set of tabs for the different brush types
as shown in Figure 8.
The first four tabs
indicate different options for brushes. These include no brush, solid
color brush, gradient brush and tile brush. Once you have selected the
Stroke brush, you can select the first tab to remove the Stroke brush
from our new rectangle. If you then select the Fill brush, you can
change the color of the brush by selecting a color within the editor as
shown in Figure 9.
Next we want to put a piece of
text in the middle of our design to show some data. In this case we
will want to put a TextBlock on our design. We can do this by going
back to the toolbar and double-clicking the TextBlock tool (as shown in
Figure 10).
While we drew our rectangle, another option is to double-click the
toolbar which inserts the selected item into the current container (in
this case, the ContentGrid). The inserted TextBlock is placed in the
upper right of our ContentGrid as also shown in Figure 19).
Once the new TextBlock
is inserted, you can simply type to add some text. Type in “Status”
just to have a place holder for some text we will place later in this
chapter. You should use the mouse to click on the Selection tool (the
top arrow on the toolbar) so you can edit the new TextBlock. You could use the mouse to place the TextBlock
exactly where you like, but you could also use the Property pane to
make it align it. In the Property pane, find the Layout section and
select the horizontal center alignment and vertical bottom alignment as
shown in Figure 11.
Next you can edit the font
and size of the TextBlock using the Text section of the Property pane.
You will likely need to scroll down to reach the Text section. From
there you can change the font, font size and text decoration (e.g.
Bold, Italic, etc.) Change the font size to 36 and make the font bold
as shown in Figure 12.
At this point our
application does not do much but hopefully you have gotten your first
taste of the basics of using Blend for design. To get our first
application doing something, we will want to hook up some of the
elements with code. So we should close Blend and head back to Visual
Studio.
Expression
Blend is great at a variety of design tasks like animations, using
behaviors to interact with user actions and creating transitions. In
subsequent chapters we will delve much further into using those parts
of the tool.
